<!--
 * @Author: cgl
 * @Date: 2023-05-18 15:05:41
 * @LastEditors: cgl
 * @LastEditTime: 2023-09-12 09:43:34
 * @FilePath: \public-health-emergencies-fed:\新放射\新radiation-hygiene-fe\src\views\workflow\box.vue
 * @Description:
 *
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved.
-->
<template>
	<div class="main" ref="refprint">
		
		<div class="padding top">
			上边距
			<el-input-number
				size="mini"
				v-model="paddingTop"
				:min="0"
				:max="20">
			</el-input-number>
		</div>
		<div class="padding bottom">
			下边距
			<el-input-number
				size="mini"
				v-model="paddingBottom"
				:min="0"
				:max="20">
			</el-input-number>
		</div>
		<div class="padding left">
			左边距
			<el-input-number
				size="mini"
				v-model="paddingLeft"
				:min="0"
				:max="20">
			</el-input-number>
		</div>
		<div class="padding right">
			右边距
			<el-input-number
				size="mini"
				v-model="paddingRight"
				:min="0"
				:max="20">
			</el-input-number>
		</div>

		<div class="box"
			:style="`
			width: ${width}mm;
			height: ${height}mm;
			padding-top: ${paddingTop}mm;
			padding-bottom: ${paddingBottom}mm;
			padding-left: ${paddingLeft}mm;
			padding-right: ${paddingRight}mm;
			`">
			<draggable animation=300 v-model="dragTextList" class="drag-wrapper" @start="start" @end="end">
				<div class="text" v-for="item in dragTextList" :key="item.id"
					:style="`font-size: ${item.fontsize}px;
					transform: translate(${item.offsetX}mm, ${item.offsetY}mm);
					text-align: ${textAlign};`">
					{{ item.label }}
				</div>
			</draggable>
		</div>
		
	<!-- </VueDragResize> -->
		<!-- <VueDragResize :isActive="false"  :isResizable="true" > -->
      <!-- <img src="@/assets/images/wsrj.jpg" height="100px" width="100px" /> -->
    <!-- </VueDragResize> -->
	</div>
</template>

<script>
import draggable from 'vuedraggable'
import QRCode from 'qrcodejs2';
import JsBarcode from 'jsbarcode';
import VueDragResize from "vue-drag-resize";
import { getLodop ,needCLodop} from '@/utils/LodopFuncs.js'
import html2canvas from "html2canvas";

export default {
  components: {
    draggable, VueDragResize
  },
  name: "box",
  data() {
    return {
			paddingTop: 1,
			paddingBottom: 1,
			paddingLeft: 1,
			paddingRight: 1,
			dragTextList: [],
			codeType: null,
			arrDPI: [],
			time: null,
    };
  },
  props: {
    width: { /* 区域大小 mm */
      type: [Number, String],
      default: 0
    },
    height: {
      type: [Number, String],
      default: 0
    },
    textAlign: {
      type: String,
      default: ""
    },
    showTextList: {
      type: Array,
      default: ()=> {
				return []
			}
    },
    showPicList: {
      type: Array,
      default: ()=> {
				return []
			}
    },
    qrcodeWidth: {
      type: [Number, String],
      default: 0
    },
    qrcodeHeight: {
      type: [Number, String],
      default: 0
    },
    barcodeGap: {
      type: [Number, String],
      default: 0
    },
    barcodeHeight: {
      type: [Number, String],
      default: 0
    },
    qrcodeInfo: {
      type: String,
      default: ""
    },
    barcodeInfo: {
      type: String,
      default: ""
    },
    barcodeBit: {
      type: Number,
      default: 1
    },
    displayValue: {
      type: Boolean,
      default: false
    },
    barcodeType: {
      type: String,
      default: ""
    },
  },
  created() {
		//获取DPI
		var arrDPI = new Array();
		if ( window.screen.deviceXDPI != undefined ) {
			console.log("111");
			arrDPI[0] = window.screen.deviceXDPI;
			arrDPI[1] = window.screen.deviceYDPI;
		}
		else {
			console.log("222");
			var tmpNode = document.createElement( "DIV" );
			tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
			document.body.appendChild( tmpNode );
			arrDPI[0] = parseInt( tmpNode.offsetWidth );
			arrDPI[1] = parseInt( tmpNode.offsetHeight );
			tmpNode.parentNode.removeChild( tmpNode );
		}
		this.arrDPI = arrDPI;
		console.log("this.arrDPI", this.arrDPI);
  },
  watch: {
    showTextList(val) {
			console.log("showTextList", val, this.width, this.height );
      this.dragTextList = val;
    },
    showPicList(val) {
			console.log("showPicList", val);
			if(val[0]) {
				this.createCode(val[0]);
			}else {
				this.codeType = null;
				this.clear();
			}
    },

    qrcodeWidth(val) {
			console.log("qrcodeWidth", val);
			if(val != 0) {
				this.createCode();
			}
    },
    qrcodeHeight(val) {
			console.log("qrcodeHeight", val, this.codeType);
			if(val != 0) {
				this.createCode();
			}
    },
    barcodeGap(val) {
			console.log("qrcodeWidth", val);
			if(val != 0) {
				this.createCode();
			}
    },
    barcodeHeight(val) {
			console.log("qrcodeHeight", val);
			if(val != 0) {
				this.createCode();
			}
    },
    barcodeBit(val) {
			console.log("barcodeBit", val);
			if(val != 0) {
				this.createCode();
			}
    },
    barcodeType(val) {
			console.log("barcodeType", val);
			this.createCode();
    },
    displayValue(val) {
			console.log("displayValue", val, false == 0);
			this.createCode();
    },
    paddingLeft(val) {
			console.log("paddingLeft", val);
			this.showBar("left");
    },
    paddingTop(val) {
			console.log("paddingTop", val);
			this.showBar("top");
    },
    paddingRight(val) {
			console.log("paddingRight", val);
			this.showBar("right");
    },
    paddingBottom(val) {
			console.log("paddingBottom", val);
			this.showBar("bottom");
    },
  },
	computed: {
		pxWidth() {
			return this.toPxWidth(this.width);
		},
		pxHeight() {
			return this.toPxHeight(this.height);
		},
		pxqrcodeWidth() {
			return this.toPxWidth(this.qrcodeWidth);
		},
		pxqrcodeHeight() {
			return this.toPxHeight(this.qrcodeHeight);
		},
		pxbarcodeGap() {
			return this.toPxWidth(this.barcodeGap).toFixed(0); /* 取小数会模糊 */
		},
		pxbarcodeHeight() {
			return this.toPxHeight(this.barcodeHeight);
		},
	},
  methods: {
		toPxWidth(val) {
			return Number(val) / 25.4 * this.arrDPI[0];
		},
		toPxHeight(val) {
			return Number(val) / 25.4 * this.arrDPI[1];
		},
		start(e) {
			console.log("start", e, this.dragTextList);
		},
		end(e) {
			console.log("end", e, this.dragTextList);
		},
		createCode(type) {
			if (type) {
				this.codeType = type;
			}
			this.clear();
			let boxDom = document.querySelector('.box');
			if(this.codeType == "二维码") {
				console.log("boxDom", boxDom);
				var qrcodeDiv = document.createElement("div");
				let style = {
					top: 0,
					right: 0,
					position: "absolute",
				}
				Object.assign(qrcodeDiv.style, style)
				qrcodeDiv.classList.add("qrcode");
				boxDom.appendChild(qrcodeDiv);
				let dragDom = document.getElementsByClassName("qrcode");
				console.log("dragDom", dragDom);
				this.qrcode = new QRCode(qrcodeDiv, {
					text: this.qrcodeInfo,
					width: this.pxqrcodeWidth,
					height: this.pxqrcodeHeight,
					colorDark: "#333333", //二维码颜色
					colorLight: "#ffffff", //二维码背景色
					correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
				});
				this.$nextTick(() => {
					this.bind(".qrcode");
				})
			}
			if(this.codeType == "条形码") {
				var barcodeDiv = document.createElement("img");
				let style = {
					top: 0,
					right: 0,
					position: "absolute",
				}
				Object.assign(barcodeDiv.style, style)
				barcodeDiv.classList.add("barcode");
				console.dir( barcodeDiv);
				boxDom.appendChild(barcodeDiv)

				let dragDom = document.getElementsByClassName("barcode");
				console.log("this.pxbarcodeGap", this.pxbarcodeGap);

        let options = {
					format: this.barcodeType,
          displayValue: this.displayValue,
          width: this.pxbarcodeGap,
          // width: 1.01,
          height: this.pxbarcodeHeight,
          margin: 0,
					textMargin: 1,
					fontSize: 12,
					marginBottom: 5,
        }
				JsBarcode(".barcode", new Array(this.barcodeBit).fill(0).join(""), options);
				this.$nextTick(() => {
					this.bind(".barcode");
				})
			}
		},
		clear() {
			let qrCodeDiv = document.querySelector(".qrcode");
			qrCodeDiv?.remove();
			let barcodeDiv = document.querySelector(".barcode");
			barcodeDiv?.remove();
		},
		bind(className) {
			let _this = this;
			let boxDom = document.querySelector('.box');
			console.log("boxDom", boxDom);
			let dragDom = document.querySelector(className);
			console.log("dragDom", dragDom);
			dragDom.style.cursor = 'move';
			dragDom.style.zIndex = 1;

			dragDom.style.right = "0px";
			dragDom.style.top = "0px";
			console.dir(dragDom);
			let drgDomWidth = dragDom.clientWidth;
			let drgDomHeight = dragDom.clientHeight;
			if (this.codeType == "二维码") {
				drgDomWidth =  Math.trunc(this.pxqrcodeWidth); /* 实际创建的大小是整数 */
				drgDomHeight = Math.trunc(this.pxqrcodeHeight);
			}
			// 鼠标按下事件
			dragDom.onmousedown = (e) => {
				console.log("鼠标按下", e, dragDom);
				console.dir(dragDom.style);
				e.preventDefault();

				// 按下的位置
				let enterX = e.clientX;
				let enterY = e.clientY;
				let right = Number(dragDom.style.right.match(/(\S*)px/)[1]);
				let top = Number(dragDom.style.top.match(/(\S*)px/)[1]);

				// 鼠标拖动事件
				document.onmousemove = function (e) {
					// 拖动的距离
					let disX = e.clientX - enterX;
					let disY = e.clientY - enterY;
					if (right - disX >= _this.pxWidth - drgDomWidth - 2) {
						dragDom.style.right = _this.pxWidth - drgDomWidth - 2 + "px";
					}else if(right - disX < 0) {
						dragDom.style.right = "0px";
					}else {
						dragDom.style.right = right - disX + "px";
					}
					if (top + disY >= _this.pxHeight - drgDomHeight - 2) {
						dragDom.style.top = _this.pxHeight - drgDomHeight - 2 + "px";
					}else if(top + disY < 0) {
						dragDom.style.top = "0px";
					}else {
						dragDom.style.top = top + disY + "px";
					}
				};
				document.onmouseup = function (e) {
					document.onmousemove = null;
					document.onmouseup = null;
				};
			}
		},
		// 展示内边距条
		showBar(position) {
			var paddingDiv = document.querySelector(".paddingDiv");
			paddingDiv?.remove();
			this.time = null;
			let boxDom = document.querySelector('.box');
			var paddingDiv = document.createElement("div");
			let style = {
				position: "absolute",
				background: "#b1b1b1",
				opacity: 1,
			}
			if(position == "left") {
				style.top = 0;
				style.left = 0;
				style.width = this.paddingLeft + "mm";
				style.height = this.pxHeight - 2 + "px";
			}
			if(position == "top") {
				style.top = 0;
				style.left = 0;
				style.width = this.pxWidth - 2 + "px";
				style.height = this.paddingTop + "mm";
			}
			if(position == "right") {
				style.top = 0;
				style.right = 0;
				style.width = this.paddingRight + "mm";
				style.height = this.pxHeight - 2 + "px";
			}
			if(position == "bottom") {
				style.bottom = 0;
				style.left = 0;
				style.width = this.pxWidth - 2 + "px";
				style.height = this.paddingBottom + "mm";
			}
			Object.assign(paddingDiv.style, style);
			paddingDiv.classList.add("paddingDiv");
			boxDom.appendChild(paddingDiv);
			// 渐变动画
			this.time = setInterval(() => {
				paddingDiv.style.opacity -= 0.01
				if(paddingDiv.style.opacity <= 0) {
					paddingDiv.remove();
					this.time = null;
				}
			}, 5);
		},
		
		// 打印编号
    handlePrint1() {
      if(needCLodop()) {
				try {
					let LODOP = getLodop();
					this.$nextTick(()=>{
						console.log(" this.$refs.refprint", this.$refs.refprint);
						html2canvas(this.$refs.refprint).then((canvas) => {
							let dataURL = canvas.toDataURL("image/png");
							if (dataURL !== "") {
								LODOP.PRINT_INIT("");
									let TextStyle = ""
									let HTML =
										TextStyle +
										"<body>" +
										`<img src="${dataURL}" alt="">`
										"</body>";
									LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", HTML);
								LODOP.PRINT(); // 打印
								// LODOP.PREVIEW(); // 预览
							}
						})
					})
				} catch (error) {
					console.log("error", error);
					this.$alert(`检测到您还未安装C-LODOP套打控件,请确认启用后再打印。或您可点击下载该套打控件，安装成功后刷新页面再进行打印`, '提示', {
						confirmButtonText: '确定',
						callback: action => {
							window.open('https://www.lodop.net/download.html' );
						}
					});
				}
      }
    },

  },
};
</script>

<style scoped lang="scss">
.main {
	position: relative;
	.padding {
		font-size: 14px;
		position: absolute;
		width: max-content;
		::v-deep .el-input-number {
			width: 70px;
			.el-input-number__decrease {
				width: 20px;
			}
			.el-input-number__increase {
				width: 20px;

			}
			input {
				padding-inline: 20px;
			}
		}
	}
	.top{
		top: -34px;
    right: 50%;
    transform: translateX(45%);
	}
	.bottom{
		bottom: -34px;
    right: 50%;
    transform: translateX(45%);
	}
	.left{
		left: -125px;
		top: 50%;
    transform: translateY(-50%);
	}
	.right{
		right: -125px;
		top: 50%;
    transform: translateY(-50%);
	}
	.box {
		// background-color: #00ffe4;
		border: 1px solid #999;
		position: relative;
		.drag-wrapper {
			height: 100%;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.text {
				cursor: move;
			}
			
		}
		.qrcode {
			position: absolute;
			top: 0;
			right: 0;
			// z-index: 2;
		}
		.barcode {
			position: absolute;
			top: 0;
			right: 0;
			// z-index: 2;
		}

	}
}
.animation {
	animation: spin .3s linear;
	animation-delay: .2s;
}

@keyframes spin {
	25% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
</style>

